import React, { Component } from 'react';
import { Button, Form, Input, message } from 'antd';
import { LOGIN_OTHER } from '../../method/data.config.js';
import GVerify from '../../method/GVerify.jsx';
import MD5 from '../../method/md5.js';
import RequestLogin from '../../method/requestWrapped.jsx';
import { connect } from 'react-redux';
import * as actions from '@pages/Home/store/action'
import { UserOutlined, KeyOutlined } from '@ant-design/icons';

class login_other extends Component {
      render() {
            const form = LOGIN_OTHER.form.from;
            const formItem = LOGIN_OTHER.form.formItem;
            const Keys = Object.keys(formItem);
            const method = {
                  username: <Input 
                        placeholder="请输入您的账号" 
                        style={{
                              marginBottom:"2vh",
                              height:"5vh"
                        }}
                        />,
                  password: <Input.Password 
                        placeholder="请输入您的密码"
                        style={{
                              height:"5vh",
                              marginBottom:"2vh"
                            }}
                  />,
                  submit: <Button 
                              type="primary" 
                              htmlType="submit"
                              block
                              style={{
                                    borderRadius: "10px",
                                    color: "#fff",
                                    background: "rgb(81, 175, 230)",
                                    height:"5vh",
                                    marginBottom:"1vh",

                                    }}
                              
                              >登录</Button>,


            };
            return (
                  <Form
                        {...form}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        style={{width:'20vw'}}
                  >
                        {Keys.map((item, index) => {
                              console.log("=>>>>>>>>>>", method[item])
                              return (
                                    <Form.Item
                                          key={index}
                                          {...formItem[item]}
                                    >
                                          {method[item]}
                                    </Form.Item>

                              )
                              
                        })}
                  </Form>
            );
      };
     //  点击确定验证成功提交表单
    onFinish = values => {
      console.log("输入:",values)
      this.props.loginRequest(values);
      return;
    };
    // 点击确定验证失败
    onFinishFailed = errorInfo => {
      message.error("输入的信息不符合规范", 1.5);
    };
};
const mapStateToProps = state => {
      return {
        isLogin: state.login.isLogin,
      }
    }
const mapDispatchToProps = dispatch => ({
      loginRequest: (values) => {
            dispatch(actions.login(values))
      },
});
export default RequestLogin(connect(mapStateToProps, mapDispatchToProps)(login_other));